<template>
<div>
  <div style="text-align:left;">
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="按需查询">
          <el-input placeholder="姓名" v-model="hmName" clearable></el-input>
        </el-form-item>
        <el-form-item>
           <el-input placeholder="手机号码" v-model="hmPhone" clearable></el-input>
        </el-form-item>
        <el-form-item>
           <el-input placeholder="年龄" type="number" v-model="hmAge"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button type="success" icon="el-icon-brush" @click="clearCondition">清空条件</el-button>
        </el-form-item>
          <el-button type="primary" round style="float: right" @click="dialogFormVisible = true">添加用户</el-button>
    </el-form>
  </div>
  <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="hmName" label="姓名" width="110"></el-table-column>
      <el-table-column prop="hmGender" label="性别" width="70"></el-table-column>
      <el-table-column prop="hmPhone" label="电话" width="130"></el-table-column>
      <el-table-column prop="hmBirthday" label="出生日期" width="130"></el-table-column>
      <el-table-column prop="hmEmail" label="邮箱" width="220"></el-table-column>
      <el-table-column prop="roleId" label="角色" width="130" :formatter="formatterRole"></el-table-column>
      <el-table-column prop="hmCreateDate" label="创建日期" width="200"></el-table-column>
      <el-table-column prop="state" label="状态" width="100" :formatter="formatState"></el-table-column>
      <el-table-column fixed="right" label="操作" width="260">
          <template slot-scope="scope">
            <el-button type="text" @click="watchUser(scope.row)"><i class="el-icon-zoom-in"></i>查看详情</el-button>
              <el-button type="text" @click="editUser(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
              <el-button type="text" v-show="scope.row.hmState==0" @click="delCode(scope.row.hmId)"><i class="el-icon-error"></i>禁用</el-button>
              <el-button type="text" v-show="scope.row.hmState==1" @click="delCode1(scope.row.hmId)"><i class="el-icon-success"></i>解冻</el-button>
          </template>
      </el-table-column>
  </el-table>

  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 5, 9, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
  </el-pagination>

  <!--新增界面-->
    <el-dialog title="添加用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="addForm" :rules="rules" ref="ruleForm">
        <el-form-item label="登录账号" :label-width="formLabelWidth" prop='hmUsername' >
          <el-input v-model="addForm.hmUsername" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" :label-width="formLabelWidth" prop='hmPassword' class="common">
          <el-input v-model="addForm.hmPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户角色" :label-width="formLabelWidth" style="text-align:left;" prop='roleId' class="common">
          <el-select v-model="addForm.roleId" placeholder="请选择用户角色" style="width:300px">
            <el-option label="系统管理员" value="1"></el-option>
            <el-option label="健康管理师" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop='hmName' class="common">
          <el-input v-model="addForm.hmName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" :label-width="formLabelWidth" prop='hmIdentity' class="common">
          <el-input v-model="addForm.hmIdentity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" style="text-align:left;" class="common">
          <el-select v-model="addForm.hmGender" placeholder="请选择性别" style="width:300px">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth" prop='hmPhone' class="common">
          <el-input v-model="addForm.hmPhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="民族" :label-width="formLabelWidth" prop='hmNation' class="common">
          <el-input v-model="addForm.hmNation" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop='hmEmail' class="common">
          <el-input v-model="addForm.hmEmail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文化程度" :label-width="formLabelWidth" prop='hmDegree' class="common">
          <el-input v-model="addForm.hmDegree" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth"  prop='hmAddress' class="common">
          <el-input v-model="addForm.hmAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="个人说明" :label-width="formLabelWidth"  prop='hmDesc' class="common">
          <el-input type="textarea" v-model="addForm.hmDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit('ruleForm')">提交添加</el-button>
      </div>
    </el-dialog>

  <!--修改界面-->
    <el-dialog title="修改用户信息" :visible.sync="dialogFormVisibleUp">
      <el-form :model="upForm" :rules="rules" ref="ruleFormUp">
        <el-form-item label="登录账号" :label-width="formLabelWidth" prop='hmUsername' >
          <el-input v-model="upForm.hmUsername" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" :label-width="formLabelWidth" prop='hmPassword' class="common">
          <el-input v-model="upForm.hmPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户角色" :label-width="formLabelWidth" style="text-align:left;" prop='roleId' class="common">
          <el-select v-model="upForm.roleId" placeholder="请选择用户角色" style="width:300px">
            <el-option label="系统管理员" :value="1"></el-option>
            <el-option label="健康管理师" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop='hmName' class="common">
          <el-input v-model="upForm.hmName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" :label-width="formLabelWidth" prop='hmIdentity' class="common">
          <el-input v-model="upForm.hmIdentity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" style="text-align:left;" class="common">
          <el-select v-model="upForm.hmGender" placeholder="请选择性别" style="width:300px">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth" prop='hmPhone' class="common">
          <el-input v-model="upForm.hmPhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="民族" :label-width="formLabelWidth" prop='hmNation' class="common">
          <el-input v-model="upForm.hmNation" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop='hmEmail' class="common">
          <el-input v-model="upForm.hmEmail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文化程度" :label-width="formLabelWidth" prop='hmDegree' class="common">
          <el-input v-model="upForm.hmDegree" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth"  prop='hmAddress' class="common">
          <el-input v-model="upForm.hmAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="个人说明" :label-width="formLabelWidth"  prop='hmDesc' class="common">
          <el-input type="textarea" v-model="upForm.hmDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleUp = false">取 消</el-button>
        <el-button type="primary" @click="upSubmit('ruleFormUp')">提交添加</el-button>
      </div>
    </el-dialog>

    <!-- 查看详情 -->
    <el-dialog title="详情页" :visible.sync="dialogVisible" width="70%" >
      <el-descriptions title="查看用户详情" direction="vertical" :column="4" border style="margin:10px">
        <el-descriptions-item label="姓名">{{watchDetails.hmName}}</el-descriptions-item>
        <el-descriptions-item label="账号">{{watchDetails.hmUsername}}</el-descriptions-item>
        <el-descriptions-item label="身份证号码">{{watchDetails.hmIdentity}}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{watchDetails.hmPhone}}</el-descriptions-item>
        <el-descriptions-item label="角色">{{watchDetails.roleId == 1 ? '系统管理员' : '健康管理师'}}</el-descriptions-item>
        <el-descriptions-item label="出生日期"><el-tag>{{watchDetails.hmBirthday}}</el-tag></el-descriptions-item>
        <el-descriptions-item label="年龄">{{watchDetails.hmAge}}</el-descriptions-item>
        <el-descriptions-item label="性别">{{watchDetails.hmGender}}</el-descriptions-item>
        <el-descriptions-item label="民族">{{watchDetails.hmNation}}</el-descriptions-item>
        <el-descriptions-item label="文化程度">{{watchDetails.hmDegree}}</el-descriptions-item>
        <el-descriptions-item label="注册时间" :span="2">{{watchDetails.hmCreateDate}}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{watchDetails.hmEmail}}</el-descriptions-item>
        <el-descriptions-item label="联系地址" :span="3">{{watchDetails.hmAddress}}</el-descriptions-item>
        <el-descriptions-item label="个人说明" :span="4">{{watchDetails.hmDesc}}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

</div>
</template>

<script>
export default {
  name: 'User',
  data () {
    return {
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 5,
      hmName: '',
      hmPhone: '',
      hmAge: '',
      addForm: {},
      upForm: {},
      dialogFormVisible: false,
      formLabelWidth: '133px',
      dialogFormVisibleUp: false,
      dialogVisible: false,
      watchDetails: {},
      rules: {
        hmUsername: [
          { required: true, message: '请输入登录账号', trigger: 'blur' },
          { min: 3, message: '长度大于 3 ', trigger: 'blur' }
        ],
        hmName: [
          { required: true, message: '请输入用户姓名', trigger: 'change' }
        ],
        roleId: [
          { required: true, message: '请选择用户角色', trigger: 'change' }
        ],
        hmPhone: [
          { required: true, message: '请输入手机号码', trigger: 'change' },
          {
            validator: function (rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) === false) {
                callback(new Error('手机号格式错误'))
              } else {
                callback()
              }
            },
            trigger: 'blur'}
        ],
        hmAddress: [
          { required: true, message: '请输入联系地址', trigger: 'change' }
        ],
        hmPassword: [
          { required: true, message: '请输入用户密码', trigger: 'change' },
          { min: 3, message: '长度大于 3 ', trigger: 'blur' }
        ],
        hmIdentity: [
          { required: true, message: '请输入身份证号码', trigger: 'change' },
          { min: 18, max: 18, message: '长度应为18位', trigger: 'blur' }
        ],
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            validator: function (rule, value, callback) {
              if (
                // eslint-disable-next-line no-useless-escape
                /^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(
                  value
                ) === false
              ) {
                callback(new Error('邮箱格式错误'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 初始化页面数据
    initUser () {
      this.$axios.post(`/api/DHHealthManagerController/findLikeUser?pageNum=${this.currentPage}&pageSize=${this.pageSize}&hmName=${this.hmName}&hmPhone=${this.hmPhone}&hmAge=${this.hmAge}`).then(({data}) => {
        this.tableData = data.rows
        this.total = data.total
      })
    },
    formatterRole (row, column) { return row.roleId === 1 ? '系统管理员' : row.roleId === 2 ? '健康管理师' : '未知' },
    formatState (row, column) { return row.hmState === 0 ? '正常' : row.hmState === 1 ? '冻结中' : '未知' },
    // 清空条件
    clearCondition () {
      this.hmName = ''
      this.hmPhone = ''
      this.hmAge = ''
    },
    // 改变页大小
    handleSizeChange (value) {
      this.pageSize = value
      this.initUser()
    },
    // 改变当前页码
    handleCurrentChange (value) {
      this.currentPage = value
      this.initUser()
    },
    // 新增
    addSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确认提交添加吗, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$axios.post(`/api/DHHealthManagerController/addUser`, this.addForm).then(result => {
              this.dialogFormVisible = false
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
              this.initUser()
              this.addForm = {}
            })
          }).catch(() => {
            this.$message('已取消提交')
          })
        } else {
          return false
        }
      })
    },
    // 修改
    upSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确认提交修改吗, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$axios.put(`/api/DHHealthManagerController/upUser`, this.upForm).then(result => {
              this.dialogFormVisibleUp = false
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.initUser()
            })
          }).catch(() => {
            this.$message('已取消修改')
          })
        } else {
          return false
        }
      })
    },
    // 编辑
    editUser (row) {
      this.$axios.post(`/api/DHHealthManagerController/queryByIdHealth?hmId=${row.hmId}`).then(({data}) => {
        this.upForm = data
        this.dialogFormVisibleUp = true
      })
    },
    // 查看详情
    watchUser (row) {
      this.dialogVisible = true
      this.watchDetails = row
    },
    // 冻结
    delCode (id) {
      this.$confirm('确定要冻结该用户吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post(`/api/DHHealthManagerController/delUser?hmId=${id}&hmState=1`).then(result => {
          this.$message({
            type: 'success',
            message: '冻结成功!'
          })
          this.initUser()
        })
      }).catch(() => {
        this.$message('已取消操作')
      })
    },
    // 解冻
    delCode1 (id) {
      this.$confirm('确定要重新启动该用户吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post(`/api/DHHealthManagerController/delUser?hmId=${id}&hmState=0`).then(result => {
          this.$message({
            type: 'success',
            message: '启用成功!'
          })
          this.initUser()
        })
      }).catch(() => {
        this.$message('已取消操作')
      })
    },
    search: function () {
      this.currentPage = 1
      this.initUser()
    }
  },
  created: function () {
    this.initUser()
  }
}
</script>
<style>
.common{
  margin-top: 23px;
}
</style>
